<template>
  <view class="components-u-refresh">
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @up="upCallback"
      :up="upOption"
      :top="top"
      :down="downOption"
      @down="downCallback">
      <view v-for="(item, index) in dataList" :key="item[keyName]">
        <slot name="data" :item="item" :index="index">
        </slot>
      </view>
      <slot name="dataList" :dataList="dataList">
      </slot>
    </mescroll-body>
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import $ajax from '@/utils/ajax'
export default {
  name: 'u-refresh',
  mixins: [MescrollMixin], // 使用mixin
  props: {
    // 接口地址
    url: {
      type: String,
      default: ''
    },
    // 页码
    pageSize: {
      type: Number,
      default: 10
    },
    // 入参
    params: {
      type: Object,
      default: () => {}
    },
    // 无更多数据入参
    noMoreText: {
      type: String,
      default: '无更多数据了'
    },
    // 判断是否使用刷新
    useDown: {
      type: Boolean,
      default: true
    },
    // 判断是否使用加载
    useUp: {
      type: Boolean,
      default: true
    },
    top: {
      type: Number,
      default: 0
    },
    keyName: {
      type: String,
      default: 'id'
    }
  },
  data() {
    return {
      dataList: [],
      isNoDate: false,
      upOption: { // 加载初始化配置
        use: this.useUp,
        page: {
          size: this.pageSize
        },
        noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于5条才显示无更多数据
        textNoMore: this.noMoreText,
        textColor: 'var(--text-color-3)',
        empty: {
          use: false
        }
      },
      downOption: { // 刷新初始化配置
        use: this.useDown,
        auto: !this.useUp
      }
    }
  },
  methods: {
    async downCallback() {
      this.dataList = []
      this.mescroll.resetUpScroll()
      // const respData = await $ajax.get(this.url, { ...this.params, pageNum: 1, pageSize: this.pageSize })
      // if (respData.success) {
      //   this.mescroll.resetUpScroll()
      //   // 设置列表数据
      //   this.dataList = respData.data?.records || []
      //   if (!respData.data?.total) {
      //     this.mescroll.endErr()
      //   }
      //   // 返回页码提供给mescroll
      //   this.mescroll.endBySize(respData.data?.records?.length, respData.data?.total || 0)
      //   this.isNoDate = this.dataList?.length === 0
      //   console.log(this.dataList?.length === 0)
      //   console.log(this.isNoDate, 'this.isNoDate')
      //   // 抛出加载数据
      //   this.$emit('upCallback', respData.data?.records)
      // } else {
      //   uni.showToast({
      //     title: `请求失败 ${respData.msg}`,
      //     icon: 'none'
      //   })
      //   this.mescroll.endErr()
      // }
    },
    /* 上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
    async upCallback(page) {
      console.log('url', this.url, page)
      if (!this.url) return
      this.isNoDate = false
      const respData = await $ajax.get(this.url, { ...this.params, pageNum: page.num, pageSize: page.size })
      if (respData.success) {
        // 如果是第一页需手动置空列表
        if (page.num === 1) this.dataList = []
        // 设置列表数据
        this.dataList = this.dataList.concat(respData.data?.records || [])
        this.isNoDate = this.dataList.length === 0
        // 返回页码提供给mescroll
        this.mescroll.endBySize(respData.data?.records?.length || 0, respData.data?.total || 0)
        // 抛出加载数据
        this.$emit('upCallback', this.dataList)
      } else {
        uni.showToast({
          title: `请求失败 ${respData.msg}`,
          icon: 'none'
        })
        this.mescroll.endErr()
      }
    }
  },
  watch: {
    params: function(oldV, newV) {
      if (JSON.stringify(oldV) !== JSON.stringify(newV)) this.downCallback()
    }
  }
}
</script>
<style lang="scss">

</style>
